<!DOCTYPE html >
<html lang = "en">

<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>新浪网</title>
<style>
*{
	margin : 0;
}

.one{
    display: flex;
    align-items: center;
	border-top: 3px solid #ff8500;
	border-bottom: 1px solid #edeef0;
	height: 41px;
	line-height: 41px;
}

a{
	display: inline - block;
	height: 41px;
	font-size: 12px;
	color: #4c4c4c;
	text-decoration: none;
	padding: 0 20px;
}

a:hover{
	background-color: #eee;
	color: #ff8500;
}

.two{
	margin-left: 250px;
	/* display: inline - block; */
}

.three{
	margin-left: 300px;
	display: inline - block;
}

.four{
	width: 250px;
	/* height: 300px; */
	border-left: 1px solid gray;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	margin-left: 20px;
}

h3{
	border-top: 3px solid #ff8500;
	border-bottom: 1px solid gray;
	font-weight: 400;
	height:30px;
	line-height: 30px;
	padding-left: 20px;
}

img{
	margin: 15px 25px;
}

.four ul li{
	font-size: 12px;
	color: black;
	list-style: none;
	background: url(images/bg2.png) no - repeat left;
	padding-left: 10px;
}

.four ul{
	padding-left: 23px;
}
</style>
</head>

<body>
<div class = "one">
    <div class = "two">
<a href = "#">设为首页</a>
<a href = "#">手机新浪网</a>
<a href = "#">移动客户端</a>
    </div>
    <div class = "three">
<a href = "#">登录</a>
<a href = "#">微博</a>
<a href = "#">博客</a>
<a href = "#">邮箱</a>
<a href = "#">网站导航</a>
    </div>
</div>
<br>
<div class = "four">
<h3>搜索趣图</h3>
<img src = "./image copy.png" alt = "趣图" height="150">
<ul>
<li>英特尔新处理器发布</li>
<li>英特尔新处理器发布</li>
<li>英特尔新处理器发布</li>
</ul>
</div>
</body>

</html>
